import React from "react";
// 如果这是一个父级路由的组件，需要一个展示子级路由的组件
import { Outlet, Link } from "react-router-dom";

/*
    目标：
        多级路由
*/

export default function App2() {
  return (
    <div>
      <div>App2</div>
      {/* 可以使用Link标签进行点击跳转 */}
      {/* 直接使用 Link 标签 使用to属性指向对应的路由路径就行 */}
      {/* 在vue里面也是使用 route-link 进行跳转 */}
      <ul>
        <li>
          <Link to="/app/home">Home</Link>
        </li>
        <li>
          <Link to="/app/list">List</Link>
        </li>
        <li>
          <Link to="/app/about">About</Link>
        </li>
      </ul>
      {/* Outlet 其实就是相当于 vue-router 的 router-view */}
      <Outlet />
    </div>
  );
}

// 在学习vue的时候 如果有子路由，是否需要在父级路由的组件里面添加一个 router-view
